<style lang="less">
  @import "./src/less/config";
  page {
    padding: 0 20rpx 20rpx 20rpx;
    width: calc(~"100% - 40rpx");
  }
  movable-area {
    width: 100%;
    height: 80rpx;
    movable-view {
      display: block;
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-size: 28rpx;
    margin-top: 30rpx;
    .edit {
      color: @base-color;
      border: 2rpx solid @base-color;
      padding: 4rpx 8rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      &.active {
        background: @base-color;
        color: #fff;
      }
    }
  }
  .items {
    display: flex;
    flex-wrap: wrap;
    .item {
      color: #333;
      border: 2rpx solid #ddd;
      padding: 8rpx 30rpx;
      border-radius: 30rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
      display: flex;
      align-items: baseline;
      .iconfont {
        color: #aaa;
        font-size: 28rpx;
        margin-right: 4rpx;
        display: none;
        &.show {
          display: flex;
        }
      }
      &.all {
        color: @base-color;
      }
    }
  }
</style>

<template>
  <view>
    <view class="title">
      <view>我的栏目</view>
      <view @tap="activeHandle" class="edit {{active ?  'active' : ''}}">编辑</view>
    </view>
    <view class="items">
      <view class="item all">全部</view>
      <block wx:for="{{choose}}" wx:key="{{index}}">
        <view @tap="delete({{item}})" class="item">
          <view class="iconfont icon-shanchu {{active ? 'show' : ''}}"></view>
          <view class="name">{{item.name}}</view>
        </view>
      </block>
    </view>
    <view class="title">
      机构
    </view>
    <view class="items">
      <block wx:for="{{org}}" wx:key="{{index}}">
        <view @tap="add({{item}},org)" class="item">
          <view class="iconfont icon-add {{active ? 'show' : ''}}"></view>
          <view class="name">{{item}}</view>
        </view>
      </block>
    </view>
    <view class="title">
      标签
    </view>
    <view class="items">
      <block wx:for="{{tags}}" wx:key="{{index}}">
        <view @tap="add({{item}},tags)" class="item">
          <view class="iconfont icon-add {{active ? 'show' : ''}}"></view>
          <view class="name">{{item}}</view>
        </view>
      </block>
    </view>
    <view class="title">
      学院
    </view>
    <view class="items">
      <block wx:for="{{college}}" wx:key="{{index}}">
        <view @tap="add({{item}},college)" class="item">
          <view class="iconfont icon-add {{active ? 'show' : ''}}"></view>
          <view class="name">{{item}}</view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import wepy from "wepy";
  import HttpMixin from "mixins/http";
  import ToastMixin from "mixins/toast";
  import DataMixin from "mixins/data";
  import db from "util/db"
  Array.prototype.removeVal = function(val) {
    const index = this.indexOf(val);
    if (index > -1) {
      this.splice(index, 1);
    }
  }
  export default class ChooseTags extends wepy.page {
    config = {
      navigationBarTitleText: "选择标签",
    };
    mixins = [HttpMixin, ToastMixin, DataMixin];
    data = {
      active: false,
      tags: ["社团活动", "本科教育", "研究生教育", "科研动态", "院内动态", "院内通知", "会议通知", "院系风采", "团情快讯", "热门", "最近", "川大在线", "新闻", "公告", "比赛", "挑战杯", "凤凰展翅", "宣讲会", "招聘信息", ],
      college: ["材料科学与工程学院", "电气信息学院", "电子信息学院", "法学院", "高分子科学与工程学院", "公共管理学院", "华西公共卫生学院", "华西口腔医学院", "华西临床医学院", "华西药学院", "化学学院", "化学工程学院", "华西基础医学与法医学院", "计算机学院", "建筑与环境学院", "经济学院", "匹兹堡学院", "历史文化学院", "轻纺与食品学院", "软件学院", "商学院", "生命科学学院", "数学学院", "水利水电学院", "外国语学院", "文学与新闻学院", "物理科学与技术学院", "艺术学院", "制造科学与工程学院"],
      org: ["青春川大", "教务处", "四川大学新闻网", "就业网", "学工部", "社团联", "研究生院"],
      choose: []
    }
    methods = {
      activeHandle() {
        this.active = !this.active
      },
      add(item, type) {
        if (!this.active) {
          return
        }
        if (this.choose.length > 10) {
          this.ShowToast("最多十个")
          return
        }
        this[type].removeVal(item)
        this.choose.push({
          name: item,
          type: type
        })
        db.Set("chooseTags", this.choose)
      },
      delete(item) {
        if (!this.active) {
          return
        }
        for (let i = 0; i < this.choose.length; i++) {
          if (this.choose[i].name == item.name) {
            this.choose.splice(i, 1);
          }
        }
        this[item.type].unshift(item.name)
        db.Set("chooseTags", this.choose)
      }
    }
    onLoad() {
      this.choose = db.Get("chooseTags") || this.choose
      this.choose.forEach(e => {
        this[e.type].removeVal(e.name)
      });
    }
  }
</script>
